.departure-station{
  padding: 0 30px;
  margin: 0 auto;
  background-color: white;
  .head{
    .head-fpic{
      text-align: center;
    }
    .head-pic{
      padding-top: 40px;
      width: 100px;
      height: 100px;
      display: inline-block;
      border-radius: 50%;
      transition: transform 1s ease;
      transform-origin: 50px 100px;
    }
    .head-pic:hover{
      transform: rotate(360deg);
    }
    .head-pic:not(:hover) {
      transition: transform 1s ease;
      transform: rotate(-360deg);
    }
    .head-fcontent{
      margin-top: 40px;
    }
    .head-content{
      background-color: greenyellow;
      width: 600px;
      margin: 0 auto;
      border-radius: 10px;
      overflow: hidden;
    }
    .head-content div{
      margin: 10px;
      text-align: center;
      font-size: 18px;
    }
    .head-content div:nth-child(2):hover{
      color: green;
    }
    .head-icon{
      text-align: center;
      display: flex;
      justify-content: center;
      align-content: center;
      margin-top: 20px;
    }
    .head-icon div>a{
      padding: 10px;
      border-radius: 25px;
      margin: 10px;
      background-color: greenyellow;
    }
  }

  .station-refresh{
      margin-top: 200px;

    .refresh-header{

      .header-img{
        width: 30px;
      }

      .header-title{
        margin-top: 10px;
        font-size: 20px;
        text-decoration:underline wavy greenyellow;
        text-underline-offset: 10px;
      }
    }

    .refresh-container{
      margin-top: 50px;
      min-height: 130px;

      .list {
        gap:20px;
        display: flex;
        justify-content: space-evenly;

        .item {
          padding-top: 20px;
          line-height: 130px;
          text-align: center;
          position: relative;
        }
        .item-img{
          width: 200px;
        }
        .item:hover .item-message{
          display: block;
        }
        .item-message{
          display: none;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          margin: 60px auto;
          font-size: 20px;
          color: red;
        }
      }

      .container-empty{
        text-align: center;
        line-height: 130px;
        font-size: 16px;
        color: #333;
      }
    }
  }

  .station-text{
    margin-top: 150px;
    padding-bottom: 40px;

    .list{
      gap:30px;

      .item {

        .item-img {
          width: 30px;
        }

        .item-title{
          margin-top: 10px;
          font-size: 20px;
          text-decoration:underline wavy sandybrown;
          text-underline-offset: 10px;
        }

        .item-container {
          display: flex;
          margin-top: 20px;
          border-radius: 10px;

          .item-container-left{
            .left-img{
              width: 450px;
            }
          }

          .item-container-user{
            width: 390px;
            background-color: rgba(255, 224, 102, 0.2);

            .user-time{
              margin: 20px 40px;
              border-radius: 6px;
              width: 200px;
              height: 30px;
              line-height: 30px;
              text-align: center;
              background-color: #fccd00;
            }

            .user-name{
              font-size: 20px;
              font-weight: bold;
              text-align: right;
              margin: 20px;
            }

            .user-name:hover{
              color:#fccd00;
              transition: 0.3s;
            }

            .user-list{
              display: flex;
              flex-direction: row-reverse;
              margin-right: 20px;

              .list-image,.list-dialog-img{
                width: 20px;
                margin-left: 30px;
              }

              .list-image{
                border-radius: 100px;
              }

              .list-name,.list-hot{
                margin-left: 10px;
              }

              .list-name:hover{
                color: darkred;
                transition: 0.3s;
                cursor: pointer;
              }
              .list-hot:hover{
                color: darkred;
                transition: 0.3s;
                cursor: pointer;
              }

            }
            .user-introduce{
              font-size: 18px;
              text-align: right;
              margin-right: 20px;
              margin-left: 20px;
              margin-top: 10px;
              color: gray;
            }
          }
        }
      }
    }
  }
}

